<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-12-01 16:46:14
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-12-01 17:15:23
 * @FilePath: \school-shop-vue\pages\settings\change_phone.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="page">
    <hx-navbar ref="hxnb" :config="config" @clickBtn="Btn" />

    <view class="content">
      <view class="content-box">
        <span class="content-box-user">姓名</span>
        <u-input
          class="content-box-input"
          v-model="form.menpai"
          :border="formConfiguration.border"
          :height="formConfiguration.height"
          placeholder="请输入您的姓名"
        />
        <span class="content-box-user">身份证号码</span>
        <view style="position: relative">
          <u-input
            class="content-box-input"
            v-model="form.menpai"
            :border="formConfiguration.border"
            :height="formConfiguration.height"
            :clearable="false"
            placeholder="请输入身份证号码"
          />
        </view>
      </view>
    </view>
    <u-toast ref="uToast" />
    <view class="submit flex-center" @click="submit">保存</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formConfiguration: {
        height: 100,
        border: true,
      },
      form: {
        name: null, // 收件人名称
        phone: null, // 收件人手机号
        menpai: null, // 收件人门牌号
      },
      config: {
        title: "实名认证",
        color: "#333333",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#ffffff", "#ffffff"]],
        // 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 onPageScroll 事件
        slideBackgroundColor: [0, ["#ffffff", "#ffffff"]],
        // 状态栏 ，数组则为滑动变色
        statusBarBackground: ["", "#ffffff"],
      },
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  .content {
    width: 100%;
    padding: 0 30rpx;
    &-box {
      width: 100%;
      background: #fff;
      border-radius: 20rpx;
      padding: 35rpx;
      margin-top: 20rpx;
      &-user {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      &-input {
        margin-top: 20rpx;
        margin-bottom: 20rpx;
      }
    }
  }

  .submit {
    width: 566rpx;
    height: 88rpx;
    color: #fff;
    background: #40ae36;
    box-shadow: 0px 2rpx 14rpx 2rpx rgba(0, 0, 0, 0.2);
    border-radius: 48rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    margin: auto;
    margin-top: 70rpx;
  }
}

/deep/.hx_font_size {
  font-weight: bold;
}

/deep/ .u-input__input {
  min-height: 80rpx !important ;
}
</style>